<template>
	<view class="content">
		<view class="zhi_index00" >
			<view class="status-bar"></view>
			<view class="zhi_index01" >
				<view class="zhi_index02" >
					<view  class="dibu dibu1"  style="color: #000;">首页</view>
					<view @click="qiehuan"  class="dibu "  >短视频</view>
				</view>
			</view>
		</view>
		
		<!-- 轮播图 -->
		<view class="uni-padding-wrap swiper-wrap" v-if="swiperarr.length>0">
			<view class="page-section">
				<view class="page-section-spacing">
					<swiper style="height: 320rpx;" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
						<swiper-item v-for="(item, index) in swiperarr" :key="index">
							<view class="swiper-item ">
								<image :src="item.image"  @click="openActivity(item)"></image>
							</view>
						</swiper-item>
						
					</swiper>
				</view>
			</view>
		</view>
		
		<view class="menu-wrap" v-if="!ish">
			<view class="menu-list" v-if="mainimage">
				<view class="menu-item" @click="openDating('0', '视频交友')">
					<image class="menu-icon" :src="mainimage[0].image" mode=""></image>
					<text>{{mainimage[0].title}}</text>
				</view>
				<view class="menu-item"  @click="openDynamics">
					<image class="menu-icon" :src="mainimage[1].image" mode=""></image>
					<text>{{mainimage[1].title}}</text>
				</view>
				 <!-- @click="openDating('2', '专属相亲')" -->
				<view class="menu-item" @click="showgame">
					<image class="menu-icon" :src="mainimage[2].image" mode=""></image>
					<text>{{mainimage[2].title}}</text>
				</view>
				<view class="menu-item" @click="openRankings">
					<image class="menu-icon" :src="mainimage[3].image" mode=""></image>
					<text>{{mainimage[3].title}}</text>
				</view>
			</view>
		</view>
		
	    <!-- 提示充值vip板块 -->
		<view class="vip-wrap" v-if="mainimage && !ish">
			<view class="vipbg" :style="{'background':'url('+mainimage[4].image+')','backgroundSize': 'cover'}" @click="skip"></view>
		</view>
		
		<view class="tabbar-wrap">
			<view class="tabbar-menu">
				<view class="menu-list">
					<view v-for="(tab, index) in tabBars" :key="tab.id" :class="['menu-item', tabIndex==index ? 'active' : '']" @click="tapTab(index)">{{tab.name}}</view>
				</view>
				<view v-if="tabIndex == 0" class="filter-wrap" @click="openFilter">
					<image class="filter-icon" src="/static/img/filter_icon.png" mode=""></image>
					<text class="filter-text">{{filter}}</text>
				</view>
			</view>
			<view class="tabbar-content">
				<view v-if="list.length > 0" class="user-list">
					<view class="user-item" v-for="(item, index) in list" :key="index">
						<view :class="['user-avatar', item.opt != 0 ? 'live live' + item.opt : '']" @click="openUserDetails(item)">
							<image class="avatar" :src="getAvatarUrl(item.avatar)" mode="aspectFill"></image>
						</view>
						<view class="info-wrap">
							<view class="user-info" @click="openUserDetails(item)">
								<view class="name">
									<text>{{item.name}}</text>
									<image v-if="item.idcard" :src="'/static/img/ms_realname' + item.sex + '.png'" mode="heightFix"></image>
									<image v-if="item.video" src="/static/img/ms_person.png" mode="heightFix"></image>
									<!-- <view :class="['status', 'status' + item.status]"></view> -->
								</view>
								<view class="info">
									<view :class="['sex-wrap', 'sex' + item.sex]">
										<image class="sex-icon" :src="'/static/img/sex' + item.sex + '.png'" mode=""></image>
										<text class="age">{{item.age}}岁</text>
									</view>
									<view class="infoAge">
										<!-- <text class="age">{{item.age + '岁'}}</text> -->
									</view>
									<view class="city">
										<text>{{item.adname && item.adname!="" ? item.adname : item.city}}</text>
									</view>
									<!-- <view :class="['sex-wrap', 'sex' + item.sex]">
										<image class="sex-icon" :src="'/static/img/sex' + item.sex + '.png'" mode=""></image>
										<text class="age">{{item.age}}</text>
									</view>
									<view v-if="item.city != ''" class="city-wrap">
										<image class="city-icon" src="/static/img/location1.png" mode=""></image>
										<template v-if="tabIndex == 0">
											<text class="city">{{item.city == '0' ? item.pname : item.city}}</text>
										</template>
										<template v-if="tabIndex == 1">
											<text class="city">{{item.adname}}</text>
										</template>
									</view> -->
								</view>
								<view class="intro">{{item.requirement}}</view>
							</view>
							<view class="other">
								<!-- <view class="nameStatus">
									<view class="name">
										<view :class="['status', 'status' + item.status]"></view>
										<text>{{item.status ? '在线' : '刚刚在线'}}</text>
									</view>
								</view> -->
								<view v-if="item.opt != 0" :class="['live', 'live' + item.opt]">{{item.opt | getTypeTips}}</view>
								<view v-else class="love">
									<image class="" :src="'/static/img/other'+ item.is_follow +'.png'" mode="" @click="handle(item, index)"></image>
									<text>{{item.is_follow ? '私信' : '心动'}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="empty" class="empty-wrap">
					<image class="empty-icon" src="/static/img/empty.png" mode=""></image>
					<text class="empty-text">暂无数据</text>
				</view>
			</view>
			<uni-load-more :status="status" :content-text="contentText"></uni-load-more>
		</view>
		<view v-if="like_list.length > 0" class="like-wrap" @click="openDatingLike">
			<view class="like-content">
				<swiper class="like-swiper" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="600">
					<swiper-item v-for="(item, index) in like_list" :key="index">
						<view class="swiper-item">
							<image class="avatar" :src="item.user.avatar" mode="aspectFill"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="like-tips">
				<text class="title">与你匹配的</text>
				<text class="desc">{{like_list.length}}人正在相亲</text>
			</view>
		</view>

		<uni-popup ref="yqPopup" type="center" :isClose="yqreq">
			<view class="dialog-wrap" >
				<view class="dialog-title">
					<text>请填写邀请码</text>
				</view>
				<view class="uni-warp">
					<input class="uni-input" v-model="yqnumber" placeholder="请您填写朋友的邀请码" />
				</view>
				<view class="btn-wrap">
					<button class="btn2" type="primary" @click="tuidFun">确定</button>
					 <!--  -->
				</view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	import util from "@/common/util.js";
	import cityList from "@/common/area-code.js";
	import amap from '@/common/amap/amap.js';
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue";
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	
	
	const deviceInfo = uni.getSystemInfoSync();
	if(deviceInfo.brand=='Xiaomi'){
		deviceInfo.windowHeight+=1
	}
	export default {
		components: {
			uniLoadMore,
			uniPopup
		},
		data() {
			return {
				statusBarHeight:deviceInfo.statusBarHeight+'px', 
				amapPlugin: null,
				location: {
					lng: '',
					lat: '',
					pname: '',
					city: '',
					adname: '',
					pcode: '',
					citycode: '',
					adcode:'',
				},
				myInfo: {},
				filter: '',
				sex:"",   //筛选性别
				tabIndex: 0,
				tabBars: [{
					name: '推荐',
					id: 'other'
				}, {
					name: '同城',
					id: 'local'
				}],
				list: [],
				page: 1,
				empty: false,
				status: 'more',
				contentText: {
					contentdown: '加载更多',
					contentrefresh: '加载中',
					contentnomore: '木有了~'
				},
				like_list: [],
				mainimage: null, // 首页图片
				// 轮播图
				// background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				swiperarr:[],
				// gamearr:[],   //游戏下载数组
				// 七牛云相关配置
				qiniu:{
					token: '',
					domain: '',
					expires: ''
				},
				yqnumber:'',
				yqreq:false,  //邀请码是否必填
				ish:false,  //是否隐藏
			}
		},
		onLoad() {
			const hiddenInfo = uni.getStorageSync('isHidden');
			if(hiddenInfo.isHidden=="1"){
				this.ish=true;
			}
			
			try {
				const myInfo = uni.getStorageSync('myInfo');
				const sensitive = uni.getStorageSync('sensitive');
				   if (!sensitive) {
				    // 调取查询邀请码是否强制接口
				    this.$api.api.ajaxData({
				     method: 'V1.SensitiveWord',
				    }, res => {
				     if (res.status) {
				      uni.setStorage({
				          key: 'sensitive',
				          data: res.data.data,
				          success: function () {
				            
				          }
				      });
				      
				     }
				    })
				   }
				
				if (myInfo) {
					this.myInfo = myInfo;
					if (!!this.myInfo.is_request) {
						for (let i = 0; i < cityList.length; i++) {
							if (this.myInfo.is_request.pcode == cityList[i].value) {
								this.filter = cityList[i].label;
							}
						}
					} else {
						this.filter = '全国';
					}
					// console.log('myInfo信息',this.myInfo)
					
					if(this.myInfo.tuid== 0 ){
						
						// 调取查询邀请码是否强制接口
						this.$api.api.ajaxData({
							method: 'V1.GetConfig',
							config: 'love.constraint.input.code',
						}, res => {
							if (res.status) {
								if(res.data=='1'){
									this.yqreq=true;
								}
							}
						})
						
					}
				}
				this.$api.api.ajaxData({
					method: 'V1.OfficialService',
				}, res => {
					if (res.status) {
						uni.setStorageSync('kefuid', res.data.id);
					}
				})
				
			} catch (e) {
				console.warn(e)
			}
			uni.$on('home-page', data => {
				if (data.type == 'filter') {
					this.filter = data.filter;
					this.sex = data.sex ? data.sex :"";
					this.page = 1;
					
					this.getHome();
					// console.log("home-page改变值",data)
				}
			})
			this.mainlist();
			
		},
		onUnload() {
			uni.$off('home-page')
		},
		onReady() {
			this.getHome('getRegeo');
			this.getRegeo();
			setTimeout(() => {
				this.getLike();
			}, 6000)
			
			//轮播图
			this.getSwp()   
			this.updateQiniuToken()
		},
		onShow(){
			// 清除缓存
			this.$api.api.ajaxData({
				method: 'V1.CacheFlush',
			}, res => {
				
			})
			
			// this.getRegeo();
			setTimeout(() => {
				this.getLike();
			}, 6000)
			this.getSwp(); //轮播图
			
			setTimeout(() => {
				
				if(this.yqreq){
					this.$refs['yqPopup'].open();
				}
			}, 1000)
			
		},
		
		onPullDownRefresh() {
			this.page = 1;
			setTimeout(() => {
				this.getHome();
				this.getLike();
			}, 500)
			this.getSwp()//轮播图
		},
		onReachBottom() {
			this.status = 'loading';
			this.getHome();
		},
		methods: {
			//首页图片
			mainlist(){
				this.$api.api.ajaxData({
					method: 'V1.Picture',
					app_id: 'EMqh2oxKpkqioula',
					sign: 'q',
					nonce: '2412',
				}, res => {
					if(res.code == '200'){
						this.mainimage = res.data;
					}
				})
			},
			// 封装消息提示
			prompt(title){
				uni.showToast({
					title,
					position: 'bottom',
					icon: 'none'
				});
			},
			// 获取七牛云域名
			updateQiniuToken: function () {
				let timestamp = (new Date()).getTime();
				let _this = this;
				this.$api.api.ajaxData({
					method: 'V1.QiniuToken',
					uid: this.myInfo.id,
					token: this.myInfo.token,
				}, res => {
					if (res.status) {
						let expires = timestamp + res.data.expires*1000;
						this.qiniu = {
							token: res.data.token,
							domain: res.data.domain,
							expires: expires
						}
					} else {
						_this.prompt(res.msg);
					}
				})
			},
			
			// 跳转vip
			skip(){
				uni.navigateTo({
					url: '../my/vip'
				})
			
			},
			// 2222轮播图
			getSwp:function(){
				this.$api.api.ajaxData({
					method: 'V1.Banner',
					uid: this.myInfo.id,
					banner_id:'',
				}, res => {
					if(res.code==200){
						this.swiperarr=res.data;
					}
					
				}, err => {
					uni.hideLoading();
					
				})
			},
			getLike: function () {
				this.$tim.getFriendList({
					fromAccount: this.IDBEFORE + this.myInfo.id
				}).then(imResponse => {
					
					let list = imResponse.data;
					let friendList = [];
					let content = '';
					for (let i = 0; i < list.length; i++) {
						friendList.push(util.getUserID(list[i].userID, this.IDBEFORE))
					}
					content = friendList.toString();
					this.$api.api.ajaxData({
						method: 'V1.Like',
						uid: this.myInfo.id,
						token: this.myInfo.token,
						content: content
					}, res => {
						if (res.status) {
							this.like_list = res.data
							getApp().globalData.like_list = this.like_list;
						}
					}, err => {
						
					})
				}).catch(imError => {
					// console.warn('获取好友列表失败:', imError);
				});
			},
			openDatingLike: function () {
				uni.navigateTo({
					url: '../dating/dating_like'
				})
			},
			tapTab: function (index) {
				if (this.tabIndex == index) {
					return false;
				}
				this.tabIndex = index;
				this.page = 1;
				this.getHome();
			},
			
			openFilter: function () {
				uni.navigateTo({
					url: 'filter?sex='+this.sex,
				})
			},
			
			openDating: function (type, title) {
				uni.navigateTo({
					url: '../dating/dating_list?type=' + type + '&title=' + title
				})
			},
			
			openDynamics: function () {
				// 跳转小视频
				uni.navigateTo({
					url: '../dynamics/dynamics_list?type=topic&tid=0&title=发现动态'
				})
			},
			
			// openRanking: function () {
			// 	uni.navigateTo({
			// 			url: 'choiceActivity'
			// 		});
			// },
			// 跳转排行榜
			openRankings: function () {
				uni.navigateTo({
						url: 'ranking'
					});
			},
			
			getRegeo: function () {
				this.amapPlugin = new amap.AMapWX({
					key: this.AMAPKEY
				});
				if (this.location.lng == '') {
					this.amapPlugin.getRegeo({
						success: (data) => {
							this.location.lng = data[0].longitude;
							this.location.lat = data[0].latitude;
							this.location.pname = data[0].regeocodeData.addressComponent.province;
							this.location.city = data[0].regeocodeData.addressComponent.city;
							this.location.adname = data[0].regeocodeData.addressComponent.district;
							this.location.pcode = data[0].regeocodeData.addressComponent.adcode.substr(0,2) + '0000';
							this.location.citycode = data[0].regeocodeData.addressComponent.adcode.substr(0,4) + '00';
							this.location.adcode = data[0].regeocodeData.addressComponent.adcode;
							
							if (!this.location.city || this.location.city == '0' || this.location.city.length == 0) {
								this.location.city = this.location.pname
							}
							console.log('获取的位置信息',this.location)
							this.page = 1;
							// this.getHome('getRegeo');
						},
						fail: (err) => {
							
							setTimeout(() => {
								this.getRegeo();
							}, 10000)
						}
					});
				}
			},
			
			getHome: function (type) {
				let _this = this;
				const form = Object.assign({}, {
					method: 'V1.Home',
					uid: this.myInfo.id,
					token: this.myInfo.token,
					type: this.tabBars[this.tabIndex].id,
					page: this.page,
					sex: this.sex,
				}, this.location);
				// console.log('V1.Home请求参数',form)
				
				this.$api.api.ajaxData(form, res => {	
					if (!type) {
						uni.hideLoading();
					}
					uni.stopPullDownRefresh();
					// console.log('V1.Home接口返回数据',res)
					if (res.status) {
						if (this.page == 1) {
							this.list = res.data
							if (this.list.length == 0) {
								this.empty = true;
							} else {
								this.empty = false;
							}
							this.page++
							
							this.status = 'more'
						} else {
							var that=this;
							if (res.data.length > 0) {
								that.list=that.list.concat(res.data)
								
								// for (let i = 0; i < res.data.length; i++) {
								// 	that.list.map(item=>{
								// 		if(item.id != res.data[i].id){
								// 			that.list.push(res.data[i])
								// 		}
								// 	})
								// }
								that.page++
								that.status = 'more'
							} else {
								this.status = 'noMore'
							}
						}
					}else{
						_this.prompt(res.msg);
					}
				}, err => {
					if (!type) {
						uni.hideLoading();
					}
					_this.prompt(res.msg);
				})
			},
			
			openUserDetails: function (item) {
				let _this = this;
				if (item.opt == 0) {
					let user = {
						id: item.id,
						name: item.name,
						avatar:item.avatar
					}
					uni.navigateTo({
						url: 'user_home?user=' + JSON.stringify(user)
					})
				} else {
					_this.prompt('正在相亲');
				}
			},
			
			handle: function (item, index) {
				let _this = this;
				if (item.is_follow == 0) {
					uni.showLoading({
						title: ''
					});
					this.$api.api.ajaxData({
						method: 'V1.Follow',
						uid: this.myInfo.id,
						token: this.myInfo.token,
						type: 'follow',
						touid: item.id,
					}, res => {
						uni.hideLoading();
						_this.prompt(res.msg);
						if (res.status) {
							let temp = this.list[index];
							temp.is_follow = 1
							this.$set(this.list, index, temp)
							let custom_ext = {
								fromId: this.myInfo.id,
								fromName: this.myInfo.name,
								fromAvatar: this.myInfo.avatar,
								toId: item.id,
								toName: item.name,
								toAvatar: item.avatar
							}
							let message = this.$tim.createCustomMessage({
								to: this.IDBEFORE + item.id + '',
								conversationType: this.TIM.TYPES.CONV_C2C,
								payload: {
									data: 'like',
									description: '点赞',
									extension: JSON.stringify(custom_ext)
								}
							});
							this.$tim.sendMessage(message).then(imResponse => {
								// console.log('点赞消息发送成功', imResponse);
							}).catch(imError => {
								console.warn('点赞消息发送失败', imError);
							});
						}
					}, err => {
						uni.hideLoading();
						_this.prompt('网络错误，请稍后再试');
					})
				} else {
					let to = {
						conversationID: 'C2C' + this.IDBEFORE + item.id,
						id: this.IDBEFORE +item.id,
						name: item.name,
						avatar: item.avatar
					}
					uni.navigateTo({
						url: '../message/im?to=' + encodeURIComponent(JSON.stringify(to))
					});
				}
			},
			
			getAvatarUrl: function (value) {
				return value.indexOf(this.QINIUURL) == -1 ? value : value + '?imageView2/1/w/100/h/100'
			},
			
			openActivity:function(items){
				let isnei=items.internal_chain;
				if(!isnei){
					if(items.content!=""){
						uni.navigateTo({
							url: './article?title='+items.title+'&content='+items.content
						});
					}
					
				}
				
				let tzurl='';
				switch(value){
					case 1:
						tzurl='../dating/dating_list?type=0&title=视频交友';
						break;
					case 2:
						tzurl='../dynamics/dynamics_list?type=topic&tid=0&title=发现动态';
						break;
					case 3:
						tzurl='game_list';
						break;
					case 4:
						tzurl='ranking';
						break;
				}
				uni.navigateTo({
					url: tzurl
				});
				
			},
			qiehuan: function() {	
				uni.navigateTo({
					url: 'index'
				})
			},
			
			showgame:function(){
				// this.$refs['gamePopup'].open();
				uni.navigateTo({
					url: 'game_list'
				});
			},
			downFun(gamelink){
				let _this = this;
				uni.setClipboardData({
					data: gamelink,
					complete() {
						_this.prompt("已复制到剪贴板，请在浏览器中打开");
					}
				})
			},
			// 填写邀请码
			tuidFun(){
				if(this.yqnumber=="" || this.yqnumber=="0"){
					this.prompt("请填写邀请码");
					return;
				}
				var that=this;
				
				that.$api.api.ajaxData({
					method: 'V1.InvitationCode',
					uid:that.myInfo.id,
					tuid:that.yqnumber
				}, res => {
					if(res.code==200){
						that.prompt("填写成功！");
						that.yqreq=false;
						that.$refs['yqPopup'].close();
						that.myInfo.tuid=that.yqnumber;
						
						uni.setStorage({
							key: 'myInfo',
							data: that.myInfo,
							success: function() {
								// console.log('myInfo信息更新',that.myInfo);
							}
						});
					}else{
						that.prompt(res.msg);
					}
				})
			},
		},
		
		filters: {
			getTypeTips: function (value) {
				if (value == 1) {
					return '视频交友…';
				}
				if (value == 2) {
					return '专属交友…';
				}
				if (value == 3) {
					return '语音交友…';
				}
				if (value == 4) {
					return '语音交友…';
				}
				if (value == 5) {
					return '七人交友…';
				}
				if (value == 6) {
					return '七人交友…';
				}
			}
		}
	}
</script>

<style lang="scss">
	@import '../../common/common.scss';
	.content{
		padding-top: 138rpx;
		// background-color: #666;
		// margin-top: ;
	}
	.menu-wrap {
		margin-top: 1rpx;
		padding: 0 20rpx;
		background-color: #FFFFFF;
		.menu-list {
			display: flex;
			align-items: center;
			justify-content: space-around;
			flex: 1;
			.menu-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding: 20rpx;
				.menu-icon {
					display: block;
					width: 120rpx;
					height: 120rpx;
				}
				text {
					font-size: 24rpx;
					color: $title-color;
					margin-top: 5rpx;
				}
			}
		}
	}
	.tabbar-menu {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		background-color: #fff;
		border-bottom: 1rpx solid #f7f7f7;
		.menu-list {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			height: 100rpx;
			flex: 1;
			padding: 0 20rpx;
			.menu-item {
				width: 140rpx;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 36rpx;
				text-align: center;
				color: #999;
				position: relative;
				&.active {
					color: #EE3476;
				}
				&.active::after {
					content: '';
					width: 20rpx;
					height: 10rpx;
					background: #EE3476;
					border-radius: 10rpx;
					position: absolute;
					left: 50%;
					bottom: 0;
					margin-left: -10rpx;
				}
			}
		}
		.filter-wrap {
			display: flex;
			justify-content: center;
			align-items: center;
			min-width: 30rpx;
			height: 100rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			.filter-icon {
				width: 40rpx;
				height: 40rpx;
			}
			.filter-text {
				font-size: 28rpx;
				color: #666;
				margin-left: 10rpx;
			}
		}
	}
	.user-item {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 20rpx;
		background-color: #fff;
		.user-avatar {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 1rpx;
			border: 4rpx solid #fff;
			border-radius: 140rpx;
			position: relative;
			&.live::after {
				content: '';
				width: 30rpx;
				height: 30rpx;
				background-repeat: no-repeat;
				background-position: center;
				background-size: 20rpx 20rpx;
				border: 4rpx solid #fff;
				border-radius: 30rpx;
				position: absolute;
				right: 0;
				bottom: 0;
			}
			&.live1 {
				border-color: #FF76A8;
				&::after {
					background-image: url('~@/static/img/video.png');
					background-color: #FF76A8;
				}
			}
			&.live2 {
				border-color: #ED4574;
				&::after {
					background-image: url('~@/static/img/video.png');
					background-color: #ED4574;
				}
			}
			&.live3 {
				border-color: #30d3ec;
				&::after {
					background-image: url('~@/static/img/audio.png');
					background-color: #30d3ec;
				}
			}
			&.live4 {
				border-color: #30d3ec;
				&::after {
					background-image: url('~@/static/img/audio.png');
					background-color: #30d3ec;
				}
			}
			&.live5 {
				border-color: #FF76A8;
				&::after {
					background-image: url('~@/static/img/video.png');
					background-color: #FF76A8;
				}
			}
			&.live6 {
				border-color: #FF76A8;
				&::after {
					background-image: url('~@/static/img/video.png');
					background-color: #FF76A8;
				}
			}
			.avatar {
				width: 140rpx;
				height: 140rpx;
				border-radius: 30rpx;
				background-color: $image-bg-color;
			}
		}
		.info-wrap {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex: 1;
			height: 180rpx;
			border-bottom: 1rpx solid #f9f9f9;
		}
		.user-info {
			flex: 1;
			margin: 0 20rpx;
			.name {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				text {
					max-width: 240rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					font-size: 36rpx;
					color: #333;
				}
				>image{
					height: 36rpx;
					margin-left: 10rpx;
					vertical-align: middle;
				}
				.status {
					width: 15rpx;
					height: 15rpx;
					border-radius: 15rpx;
					margin-left: 10rpx;
					&.status1 {
						background-color: #4cd964;
					}
					&.status2 {
						background-color: #ffd200;
					}
					&.status3 {
						background-color: #cccccc;
					}
				}
			}
			.info {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				// background-color: #0ee;
				.infoAge{
				position: relative;
				}
				.infoAge::after{
					content: '';
					display: block;
					position: absolute;
					width: 2rpx;
					height: 22rpx;
					background-color: #d8d8d8;
					// bottom: 13rpx;
					right: -11rpx;
					top: 50%;
					transform: translate(-50%,-50%);
				}
				>view{
					font-size: 28rpx;
					color: #999;
				}
				.city{
					margin-left: 20rpx;
				}
			}
			// .info {
			// 	display: flex;
			// 	justify-content: flex-start;
			// 	align-items: center;
			// }
			.sex-wrap {
				display: flex;
				justify-content: center;
				align-items: center;
				line-height: 28rpx;
				padding: 5rpx 10rpx;
				border-radius: 28rpx;
				&.sex1 {
					background: #83d7ff;
				}
				&.sex2 {
					background: #fe9ab7;
				}
				.sex-icon {
					width: 28rpx;
					height: 28rpx;
				}
				.age {
					font-size: 28rpx;
					color: #fff;
					margin-left: 5rpx;
				}
			}
			.city-wrap {
				display: flex;
				justify-content: center;
				align-items: center;
				line-height: 28rpx;
				padding: 5rpx 10rpx;
				border-radius: 28rpx;
				background: #4cbcfc;
				margin-left: 10rpx;
				.city-icon {
					width: 28rpx;
					height: 28rpx;
				}
				.city {
					font-size: 28rpx;
					color: #fff;
					margin-left: 5rpx;
				}
			}
			.intro {
				width: 360rpx;
				font-size: 32rpx;
				color: #999999;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				margin-top: 10rpx;
			}
		}
		.other {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			padding-right: 10rpx;
			.love{
				width: 105rpx;
				height: 50rpx;
				border: 1px solid #eee;
				padding: 8rpx 15rpx;
				border-radius: 50rpx;
				>image{
					width: 50rpx;
					height: 50rpx;
					vertical-align: middle;
				}
				>text{
					color: #888888;
					font-size: 22rpx;
				}
			}
			.live3, .live4 {
				color: #30d3ec;
				font-size: 24rpx;
				font-weight: 700;
			}
			.live1, .live5, .live6 {
				color: #FF76A8;
				font-size: 24rpx;
				font-weight: 700;
			}
			.live2 {
				color: #ED4574;
				font-size: 24rpx;
				font-weight: 700;
			}
			.other-icon {
				width: 60rpx;
				height: 50rpx;
			}
		}
	}
	.like-wrap {
		display: flex;
		justify-content: center;
		align-items: center;
		background-image: linear-gradient(to right bottom, $main-color, $secondary-color);
		padding: 10rpx 30rpx 10rpx 10rpx;
		border-radius: 80rpx;
		overflow: hidden;
		position: fixed;
		right: 20rpx;
		bottom: 120rpx;
		.like-content {
			width: 80rpx;
			height: 80rpx;
			.swiper-item {
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.avatar {
				width: 80rpx;
				height: 80rpx;
				border-radius: 80rpx;
			}
		}
		.like-tips {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: flex-start;
			margin-left: 10rpx;
			.title {
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 32rpx;
			}
			.desc {
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 32rpx;
			}
		}
	}
	// 首页轮播图
	.swiper-wrap{
		background-color:#ffffff;
		height: 320rpx !important;
		margin-top: 30rpx;
		.swiper-item{
			text-align: center;
			width: 690rpx !important;
			height: 320rpx !important;
			border-radius: 10rpx;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
				
			}
		}
	}
	// 修改选中推荐还是同城
	// vip板块ui
	.vip-wrap{
		width: 750rpx;
		height: 159rpx;
		background-color: #fff;
		.vipbg{
			width: 603rpx;
			height: 159rpx;
			margin: 0 auto;
			position: relative;
		}
		.vipbg:before{
			content: '';
			display: block;
			width: 88rpx;
			height: 88rpx;
			position: absolute;
			background: url('@/static/img/icGO.png');
			background-size: cover;
			right: -20rpx;
			top: 50%;
			transform: translate(-50%,-50%);
		}
	}
	// 
	.nameStatus {
		margin-bottom: 40rpx;
		.name {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			text {
				// max-width: 360rpx;
				// overflow: hidden;
				// white-space: nowrap;
				// text-overflow: ellipsis;
				// font-size: 36rpx;
				color: #999;
			}
			.status {
				width: 15rpx;
				height: 15rpx;
				border-radius: 15rpx;
				margin-right: 10rpx;
				&.status1 {
					background-color: #4cd964;
				}
				&.status2 {
					background-color: #ffd200;
				}
				&.status3 {
					background-color: #cccccc;
				}
			}
		}
	}
	
	.zhi_index00{
		position: fixed;
		top: var(--status-bar-height);
		z-index: 999;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		// padding-top: var(--status-bar-height);
		
		// padding-top: var(--status-bar-height);;
		background-color: #FFFFFF;
	}
	.status-bar {
		background-color: #666;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9;
		height:var(--status-bar-height) ;
	}
	.zhi_index01{
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	.zhi_index02{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		height: 100rpx;
		width: 400rpx;
		
		.dibu {
			width: 200rpx;
			height: 100rpx;
			line-height: 100rpx;
			font-size: 36rpx;
			text-align: center;
			color: #999;
			position: relative;
			display: block;
		}
		.dibu1 {
			font-weight: bold;
			font-size: 38rpx;
			color: #000 !important;
		}
	}
    
	// 游戏下载弹出框面板
	.popup-wrap {
		background-color: #fff;
		border-radius: 20rpx;
		width: 500rpx;
		left: 125rpx;
	}
	.game-popup {
		width: 600rpx;
		height: 640rpx;
		overflow-y: scroll;
	}
	
	.popup-header {
		width: 100%;
		height: 80rpx;
		font-size: 34rpx;
		line-height: 80rpx;
		text-align: center;
	}
	
	.popup-content {
		flex: 1;
		padding: 10rpx 30rpx;
	}
	
	.game-list {
		width: 100%;
		flex: 1;
		flex-direction: row;
		flex-wrap: wrap;
		padding: 10rpx 5rpx;
	}
	.game-item {
		width: 180rpx;
		height: 240rpx;
		text-align: center;
		border-radius: 10rpx;
		float: left;
	}
	
	.gift-image-wrap {
		width: 180rpx;
		height: 130rpx;
		justify-content: center;
		align-items: center;
	}
	.gift-image {
		width: 130rpx;
		height: 130rpx;
	}
	.gift-name {
		width:100% ;
		height: 40rpx;
		line-height: 40rpx;
		font-size: 24rpx;
		color: #333;
		text-align: center;
	}
	
	.downbtn {
		background: #e33c64;
		width: 80rpx;
		height: 40rpx;
		line-height: 40rpx;
		font-size: 28rpx;
		color: #fff;
		border-radius: 10rpx;
		margin: 0 auto 20rpx;
	}
	
	.dialog-wrap{
		background-color: #fff;
		padding: 20rpx 30rpx;
		border-radius: 20rpx;
		overflow: hidden;
		width: 500rpx;
		.dialog-title{
			font-size: 34rpx;
			color: #333333;
			text-align: center;
		}
		.uni-warp{
			height: 60rpx;
			line-height: 60rpx;
			margin: 30rpx auto;
			display: inline-block;
			.uni-input{
				margin-bottom: 30rpx;
				text-align: cneter;
				
			}
		}
	}
</style>
